<!doctype html>
<html>
<head>
  <title>Network | DOT edge styles</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font: 10pt sans;
      line-height: 1.5em;;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: #4d4d4d;
      box-sizing: border-box;
      overflow: hidden;
    }

    #header {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }

    #contents {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
    }

    #left, #right {
      position: absolute;
      width: 50%;
      height: 100%;
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
      display: inline-block;
    }

    #left {
      top: 0;
      left: 0;
    }

    #right {
      top: 0;
      right: 0;
    }

    #error {
      color: red;
    }

    #data {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      resize: none;
    }

    #draw, #reset {
      padding: 5px 15px;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
    }

    a:hover {
      color: red;
    }

  </style>
  
</head>
<body>

<div id="header">
  <h1>DOT edge styles</h1>

  <div>
    <p>
      Example of edge styles support
    </p>

    <ul>
      <li> label: text displayed on the edge</li>
      <li> color: edge color</li>
      <li> style: edge style is solid(default), dashed or dotted</li>
    </ul>
  </div>

  <div>
    <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
    <button id="reset" title="Reset the DOT graph">Reset</button>
    <span id="error"></span>
  </div>
</div>

<div id="contents">
  <div id="left">
    <textarea id="data">
    </textarea>
  </div>
  <div id="right">
    <div id="mynetwork"></div>
  </div>
</div>

<script type="text/javascript">
  var dotDefault = "digraph {\n" +
    " Parent -> C1[label=\"default\"];  // Default style is solid \n" +
    " Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
    " Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
    " Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
    "}";

  // create a network
  var container = document.getElementById('mynetwork');
  var options = {
    physics: {
      stabilization: false,
      barnesHut: {
        springLength: 200
      }
    }
  };
  var data = {};
  var network = new vis.Network(container, data, options);

  $('#draw').click(draw);
  $('#reset').click(reset);

  $(window).resize(resize);
  $(window).load(draw);

  $('#data').keydown(function (event) {
    if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
      draw();
      event.stopPropagation();
      event.preventDefault();
    }
  });

  function resize() {
    $('#contents').height($('body').height() - $('#header').height() - 30);
  }

  function draw () {
    try {
      resize();
      $('#error').html('');

      // Provide a string with data in DOT language
      data = vis.network.convertDot($('#data').val());

      network.setData(data);
    }
    catch (err) {
      // set the cursor at the position where the error occurred
      var match = /\(char (.*)\)/.exec(err);
      if (match) {
        var pos = Number(match[1]);
        var textarea = $('#data')[0];
        if(textarea.setSelectionRange) {
          textarea.focus();
          textarea.setSelectionRange(pos, pos);
        }
      }

      // show an error message
      $('#error').html(err.toString());
    }
  }

  function reset() {
    $('#data').val(dotDefault);
    draw();
  }

  window.onload = function() {
    reset();
  }
</script>
</body>
</html>
